<template>
	<div class="shop-box">
		<div class="shop-content" :style="{width: screenWidth}">
      <div class="shop-top" :style="{width: screenWidth}">
        <div class="shop-top-content">
          <div class="shop-top-left">
            <div class="top-left-black">
              返回
            </div>
          </div>
          <div class="shop-top-title"></div>
        </div>
      </div>
      <view class="wrap" >
		<u-swiper :list="list" height="1100" border-radius="0"></u-swiper>
	</view>
   <!-- <view class="wrap" >
		<u-swiper :list="list" height="1100"></u-swiper>
	</view> -->

      <div class="shop-bottom" :style="{width: screenWidth}"></div>
    </div>
	</div>
	<!-- <div class="title">首页</div> -->
</template>

<script>
	export default {
		name: "home-shop",
		data() {
			return {
				screenWidth:360,
        list: [{
						image: 'https://lamp.tp999.top/uploadimages/20219/VyY1FnqZIuCLKuyjMzULKZ.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			}
		},
		onLoad() {
			console.log(this.screenWidth);
			console.log(document.body.clientWidth);
			if(document.body.clientWidth < 500) {
				this.screenWidth = '100vw'
			} else {
				this.screenWidth = '1000rpx'
			}
			this.getImageInfo('https://lamp.tp999.top/uploadimages/20219/VyY1FnqZIuCLKuyjMzULKZ.jpg')
		},
		methods:{
			getImageInfo(url) {
			
			        var img = new Image();
			        img.src = url;
			        if (img.complete) {
			        // 如果图片被缓存，则直接返回缓存数据
			            
						console.log(img.width, img.height);
			        } else {
			            img.onload = function () {
			              console.log(img.width, img.height);
			            }
			        }
			    }
		}
		}
</script>

<style lang="scss" scoped>
	.shop-box {
		width: 100vw;
		display: flex;
	}
	.shop-content {
		height: 100upx;
    margin: auto;
    position: relative;
    height: auto;
    overflow: auto;
	}
	.title {
		color:$uni-text-color
	}
  @mixin fixClass {
    position: fixed;
    width: 100%;
  }
  .shop-top {
    position: fixed;
    top: 0;
    width: 100%;
  }
  .shop-top-content {
    height: 46px;
    background: #18B566;
    display: flex;
    position: relative;
  }
  .shop-top-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 52px;
    height: 100%;
    display: flex;
    line-height: 46px;
    text-align: center;
    color: aliceblue;
  }
  .top-left-black {
    margin: auto;
  }
  .shop-top-title {
    width: 60%;
    height: 100%;
    margin: auto;
    background: $uni-bg-color;
  }
  .shop-bottom {
    @include fixClass;
    bottom: 0;
    background: $uni-bg-color;
    height: 42px;
  }

  .wrap {
    padding-top:46px;
    width: 100%;
	}
 
</style>
